<template>
  <div>
      <el-table
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="id"
              label=部门编号
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="部门名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type.name"
              label="部门类型">
            </el-table-column>
            <el-table-column
              label="拥有业务">
              <template slot-scope="scope">
                <span style="margin-left: 10px" v-for="(item) in scope.row.business" >{{item.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="countuser_count"
              label="部门人数">
            </el-table-column>
            <el-table-column
              prop="manage"
              label="管理">
              <template slot-scope="scope">
                 <el-button
                   size="mini"
                   @click="handleEdit(scope.row)">编辑</el-button>
                 <el-button
                   size="mini"
                   type="danger"
                   @click="handleDelete(scope.row)">删除</el-button>
               </template>
          </el-table-column>
       </el-table>
      <div>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="10">
        </el-pagination>
      </div>
  </div>
</template>
  <script>
  import axios from 'axios'
  import {department, getHeader} from '../../../config/config'
    export default {
      name:'Department',
      data() {
        return {
          tableData:[],
          params: {
            page: 1,
            limit:30
          }
        }
      },
      mounted() {
         this.send();
     },
      methods: {
        handleDelete(row) {
          let id = row.id
          let url = `${department}/${id}`
          this.$confirm('此操作将永久删除本行 '+ ', 是否继续?', '提示', { type: 'warning' })
            .then(() => {
               axios.delete(url, {headers: getHeader()})
               .then((response) => {
                 console.log(response)
                  this.$message.success('成功删除了' +row.name +'!');
                  this.send();
                })
               .catch((err) => {
                 console.log(err)
                  this.$message.error('删除失败!');
               });
            })
            .catch(() => {
              this.$message.info('已取消操作!');
            });
        },
        handleEdit(){

        },
        send(){
          let vm= this;
          axios.get(department,{headers: getHeader(), params: this.params})
              .then(function (res) {
                if(res.status == 200){
                  vm.tableData = res.data.data.data;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
        }
      }
    }
  </script>
  <style>
   .el-table th>.cell{
     text-align:center;
   }
   .el-pagination{
     background:#fff;
     padding: 20px 5px;
   }
  </style>
